<template>
  <div>
    <div class="guild-content">
        <div class="guild-search">
          <van-field v-model="value" placeholder="Search For a guild iD or guild name" />
        </div>
        <div class="guild-tabs">
          <div class="guild-tabs-item" :class="tabsIndex === 0 ? 'act' : ''" @click="handleClick(0)">
            <span>List of guild</span>
            <div class="item-icon">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="guild-tabs-item" :class="tabsIndex === 1 ? 'act' : ''" @click="handleClick(1)">
            <span>My guild</span>
            <div class="item-icon">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
        <div class="guild-mains">
          <template v-if="tabsIndex === 0">
            <!--公会列表-->
            <div class="guild-list" v-for="(guild,index) in guildList" :key="index">
              <div class="guild-logo">
                <img :src="guild.logo" alt="">
              </div>
              <div class="guild-area">
                <img :src="guild.area" alt="">
                <span>{{ guild.name }}</span>
              </div>
              <div class="guild-btn">
                <span>Join</span>
              </div>
            </div>
          </template>
          <template v-else>
            <!--我的公会-->
            <div class="guild-user">
              <div class="guild-user-logo">
                <img src="https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639" alt="">
              </div>
              <div class="guild-user-text">
                <div class="guild-user-name">
                  <span>Josdnasjasd</span>
                </div>
                <div class="guild-user-area">
                  <img src="https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132" alt="">
                </div>
                <div class="guild-user-time">
                  <span>2024-09-12</span>
                </div>
              </div>
            </div>
            <router-link to="/main">
              <div class="guild-user-list">
                <span>Member management</span>
                <div class="item-icon">
                  <van-icon name="arrow" />
                </div>
              </div>
            </router-link>
            <router-link to="/payroll">
              <div class="guild-user-list">
                <span>Payroll management</span>
                <div class="item-icon">
                  <van-icon name="arrow" />
                </div>
              </div>
            </router-link>
          </template>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'My guild',
  data() {
    return {
      value:'',
      tabsIndex:0,
      guildList:[
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey'
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey'
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey'
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey'
        },
      ]
    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    this.$router.push({ path: '/main' })

  },

  methods: {
    // 切换
    handleClick(index){
      this.tabsIndex = index
    },
    // 抖音挑战赛
    toActivity() {
      if(this.screenWidth > 768) {
        this.banner.jumpLink && window.open(this.banner.jumpLink)
        this.banner.jumpPcPicture && window.open(this.banner.jumpPcPicture)
      } else {
        this.banner.jumpLink && window.open(this.banner.jumpLink)
        this.banner.jumpAppPicture && window.open(this.banner.jumpAppPicture)
      }
    },
    // 从缓存中获取数据
  },
}
</script>

<style scoped lang="scss">
  body{
    background-color: #F7F7F7 !important;
  }
  .guild-content {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 15px;
    .guild-search{
      width: 100%;
      height: auto;
      border: 1px solid #e1e1e1;
      border-radius: 50px;
      overflow: hidden;
      margin-bottom: 16px;
    }
    .guild-tabs{
      width: 100%;
      height: 44px;
      display: flex;
      flex-direction: row;
      .guild-tabs-item{
        width: 50%;
        margin: 0 5px;
        color: #fff;
        position: relative;
        box-sizing: border-box;
        padding: 0 20px;
        border-radius: 8px;
        background-image: linear-gradient(315deg, #bfbfbf 0, #bfbfbf 100%);
        &.act{
          background-color: #FFFFFF;
          background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
        }
        span{
          font-size: 16px;
          line-height: 44px;
        }
        .item-icon{
          width: 40px;
          height: 44px;
          text-align: center;
          line-height: 44px;
          color: #fff;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 18px;
        }
      }
    }
    .guild-mains{
      width: 100%;
      height: auto;
      margin-top: 20px;
      .guild-list{
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 15px;
        background-color: #FFF;
        position: relative;
        .guild-logo{
          width: 40px;
          height: 40px;
          float: left;
          margin-right: 10px;
          img{
            width: 40px;
            height: 40px;
            display: block;
            border-radius: 2px;
          }
        }
        .guild-area{
          height: 40px;
          box-sizing: border-box;
          padding: 10px 0;
          float: left;
          img{
            width: 20px;
            height: 20px;
            display: inline-block;
          }
          span{
            font-size: 15px;
            line-height: 20px;
            margin-left: 10px;
            color: #666666;
          }
        }
        .guild-btn{
          width: 60px;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          position: absolute;
          right: 15px;
          top: 15px;
          background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
          color: #FFFFFF;
        }
      }
      .guild-user{
        width: 100%;
        height: 120px;
        background: url(https://img0.baidu.com/it/u=4087941250,181213859&fm=253&fmt=auto&app=120&f=JPEG?w=934&h=500);
        background-size: cover;
        box-sizing: border-box;
        padding: 10px 30px;
        border-radius: 60px;
        .guild-user-logo{
          width: 100px;
          height: 100px;
          float: left;
          margin-right: 15px;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 100px;
            height: 100px;
            display: block;
            border-radius: 8px;
          }
        }
        .guild-user-text{
          float: left;
          .guild-user-name{
            line-height: 24px;
            font-size: 16px;
            color: #FFF;
          }
          .guild-user-area{
            height: 20px;
            margin-top: 5px;
            img{
              width: auto;
              height: 20px;
            }
          }
          .guild-user-time{
            line-height: 24px;
            font-size: 14px;
            color: #999999;
            margin-top: 25px;
          }
        }
      }
      .guild-user-list{
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 10px 15px;
        border-radius: 10px;
        margin-top: 20px;
        background-color: #FFF;
        position: relative;
        line-height: 40px;
        .item-icon{
          width: 40px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          color: #999;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 24px;
        }
      }
    }
  }
</style>
